<script setup>
import {ref} from "vue";

// 定义表单数据
const form = ref({
  name: "新建场景",
  backgroundColor: "rgba(30, 36, 48, 1)",
  longitude: 116.405285,
  latitude: 39.904989,
  altitude: 0,
  grid: {
    show: true,
    opacity: 1,
    color: "rgb(30, 36, 48)",
    lineColor: "rgb(30, 36, 48)",
    mirror: false,
    blur: 20,
  },
  environment: {
    type: "default",
    skyboxUrl: "",
    skyboxHorizontalAngle: 0,
    environmentMapUrl: "",
    brightness: 1,
    horizontalAngle: 0,
    weather: "none",
    time: "09:00",
    sunlightEnabled: true,
    sunlightBrightness: 2,
    sunlightHorizontalAngle: 0,
    shadowsEnabled: true,
    shadowQuality: "medium",
    shadowBias: 0.5,
  },
  camera: {
    type: "orbit",
    disabledDuringRuntime: false,
    fieldOfView: 45.8,
    centerX: 0,
    centerY: 0,
    centerZ: 0,
    radius: 48.5032651,
    minRadius: 1,
    maxRadius: 10000,
    horizontalAngle: -90,
    verticalAngle: 45,
    minVerticalAngle: 0,
    maxVerticalAngle: 180,
  },
  effects: {
    fogEnabled: false,
    fogColor: "rgb(30, 36, 48)",
    fogStartDistance: 0,
    fogEndDistance: 1000,
    particleSystemEnabled: false,
    particleCount: 100,
    particleSpeed: 1,
    particleColor: "rgb(30, 36, 48)",
    glowEnabled: false,
    glowIntensity: 1,
    glowColor: "rgb(30, 36, 48)",
    reflectionEnabled: false,
    reflectionIntensity: 1,
    reflectionBlur: 1,
  },
});
</script>

<template>
  <div class="settings-panel">
    <el-form :model="form" label-width="6.5vw">
      <!-- 基础设置 -->

      <el-form-item label="基础" class="right-menu-title">
      </el-form-item>
      <el-form-item label="名称" style="color: #fff">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="背景色">
        <el-color-picker v-model="form.backgroundColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="经度">
        <el-input-number
            v-model="form.longitude"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="纬度">
        <el-input-number
            v-model="form.latitude"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="海拔">
        <el-input-number
            v-model="form.altitude"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <!-- 网格地面设置 -->
      <el-form-item label="网格地面" class="right-menu-title">
      </el-form-item>
      <el-form-item label="显示">
        <el-checkbox v-model="form.grid.show"></el-checkbox>
      </el-form-item>
      <el-form-item label="透明度">
        <el-slider v-model="form.grid.opacity" show-input></el-slider>
      </el-form-item>
      <el-form-item label="网格颜色">
        <el-color-picker v-model="form.grid.color"></el-color-picker>
      </el-form-item>
      <el-form-item label="线条颜色">
        <el-color-picker v-model="form.grid.lineColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="显示镜面">
        <el-checkbox v-model="form.grid.mirror"></el-checkbox>
      </el-form-item>
      <el-form-item label="镜面模糊值">
        <el-slider v-model="form.grid.blur" show-input></el-slider>
      </el-form-item>
      <!-- 环境设置 -->
      <el-form-item label="环境" class="right-menu-title">
      </el-form-item>
      <el-form-item label="环境类型">
        <el-select v-model="form.environment.type" placeholder="请选择">
          <el-option label="默认" value="default"></el-option>
          <el-option label="自定义" value="custom"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="天空盒地址">
        <el-input
            v-model="form.environment.skyboxUrl"
            placeholder="请输入天空盒地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="天空盒水平角度">
        <el-slider
            v-model="form.environment.skyboxHorizontalAngle"
            show-input
        ></el-slider>
      </el-form-item>
      <el-form-item label="环境贴图地址">
        <el-input
            v-model="form.environment.environmentMapUrl"
            placeholder="请输入环境贴图地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="环境亮度">
        <el-slider v-model="form.environment.brightness" show-input></el-slider>
      </el-form-item>
      <el-form-item label="环境水平角度">
        <el-slider
            v-model="form.environment.horizontalAngle"
            show-input
        ></el-slider>
      </el-form-item>
      <el-form-item label="时间">
        <el-time-picker
            v-model="form.environment.time"
            placeholder="请选择时间"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="开启太阳光">
        <el-checkbox v-model="form.environment.sunlightEnabled"></el-checkbox>
      </el-form-item>
      <el-form-item label="阳光最大亮度">
        <el-slider
            v-model="form.environment.sunlightBrightness"
            show-input
        ></el-slider>
      </el-form-item>
      <el-form-item label="阳光水平角度">
        <el-slider
            v-model="form.environment.sunlightHorizontalAngle"
            show-input
        ></el-slider>
      </el-form-item>
      <el-form-item label="显示阴影">
        <el-checkbox v-model="form.environment.shadowsEnabled"></el-checkbox>
      </el-form-item>
      <el-form-item label="阴影质量">
        <el-select
            v-model="form.environment.shadowQuality"
            placeholder="请选择"
        >
          <el-option label="低" value="low"></el-option>
          <el-option label="中" value="medium"></el-option>
          <el-option label="高" value="high"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="阴影偏差">
        <el-slider v-model="form.environment.shadowBias" show-input></el-slider>
      </el-form-item>
      <!-- 相机设置 -->
      <el-form-item label="相机" class="right-menu-title">
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="form.camera.type" placeholder="请选择">
          <el-option label="旋转相机" value="orbit"></el-option>
          <el-option label="第一人称相机" value="first-person"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运行时禁用">
        <el-checkbox v-model="form.camera.disabledDuringRuntime"></el-checkbox>
      </el-form-item>
      <el-form-item label="相机视场角">
        <el-input-number
            v-model="form.camera.fieldOfView"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="中心-X">
        <el-input-number
            v-model="form.camera.centerX"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="中心-Y">
        <el-input-number
            v-model="form.camera.centerY"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="中心-Z">
        <el-input-number
            v-model="form.camera.centerZ"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="半径">
        <el-input-number
            v-model="form.camera.radius"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="最小半径">
        <el-input-number
            v-model="form.camera.minRadius"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="最大半径">
        <el-input-number
            v-model="form.camera.maxRadius"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="水平角度">
        <el-slider v-model="form.camera.horizontalAngle" show-input></el-slider>
      </el-form-item>
      <el-form-item label="垂直角度">
        <el-slider v-model="form.camera.verticalAngle" show-input></el-slider>
      </el-form-item>
      <el-form-item label="最小垂直角度">
        <el-input-number
            v-model="form.camera.minVerticalAngle"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="最大垂直角度">
        <el-input-number
            v-model="form.camera.maxVerticalAngle"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <!-- 特效设置 -->
      <el-form-item label="特效" class="right-menu-title">
      </el-form-item>
      <el-form-item label="雾效果启用">
        <el-checkbox v-model="form.effects.fogEnabled"></el-checkbox>
      </el-form-item>
      <el-form-item label="雾颜色">
        <el-color-picker v-model="form.effects.fogColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="雾起始距离">
        <el-input-number
            v-model="form.effects.fogStartDistance"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="雾结束距离">
        <el-input-number
            v-model="form.effects.fogEndDistance"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="粒子系统启用">
        <el-checkbox v-model="form.effects.particleSystemEnabled"></el-checkbox>
      </el-form-item>
      <el-form-item label="粒子数量">
        <el-input-number
            v-model="form.effects.particleCount"
            controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="粒子速度">
        <el-slider v-model="form.effects.particleSpeed" show-input></el-slider>
      </el-form-item>
      <el-form-item label="粒子颜色">
        <el-color-picker v-model="form.effects.particleColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="光晕效果启用">
        <el-checkbox v-model="form.effects.glowEnabled"></el-checkbox>
      </el-form-item>
      <el-form-item label="光晕强度">
        <el-slider v-model="form.effects.glowIntensity" show-input></el-slider>
      </el-form-item>
      <el-form-item label="光晕颜色">
        <el-color-picker v-model="form.effects.glowColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="反射效果启用">
        <el-checkbox v-model="form.effects.reflectionEnabled"></el-checkbox>
      </el-form-item>
      <el-form-item label="反射强度">
        <el-slider
            v-model="form.effects.reflectionIntensity"
            show-input
        ></el-slider>
      </el-form-item>
      <el-form-item label="反射模糊度">
        <el-slider v-model="form.effects.reflectionBlur" show-input></el-slider>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.settings-panel {
  background-color: #1e2430;
  color: white;
  height: 95vh;
  overflow: auto;
}

.el-form-item {
  margin-left: 0.8vw;
}

.el-form-item >>> .el-form-item__label {
  color: white !important;
  justify-content: flex-start;
}

.el-form-item >>> .el-form-item__content {
  background-color: #1e2430;
  width: 4vw;
  height: 2vh;
}

.el-form-item >>> input {
  color: white !important;
}

.right-menu-title /deep/ .el-form-item__label {
  font-size: 1vw;
  font-weight: 550;
  --color: #fff;
}

:deep .el-form-item__label {
  font-size: 0.8vw;
  /* font-weight: 600; */
  height: 3vh;
}

:deep .el-input {
  width: 8vw;
}

:deep .el-input__inner {
  width: 2vw;
  height: 3vh;
  font-size: 0.6vw;
}

:deep .el-color-picker__color-inner {
  width: 1.5vw;
  height: 1.5vw;
}

:deep .el-color-picker__trigger {
  width: 1.7vw;
  height: 1.7vw;
  padding: 0;
}

:deep .el-input__wrapper {
  background-color: #1e2430;
}

:deep .el-input__wrapper .el-input__inner {
  width: 4vw;
  height: 3vh;
}

:deep .el-input-number .el-input__wrapper {
  padding-left: 0;
  padding-right: 0;
}

:deep .el-date-editor {
  --el-date-editor-width: 8vw;
}

:deep .el-checkbox__input {
  width: 2vw;
  height: 2vw;
  //margin-left: 0.5vw;
  margin-top: 1vw;
}
:deep .el-checkbox__inner:after {
  height: 1vh;
  left: 0.8vh;
}
:deep .el-checkbox__inner {
  width: 1vw;
  height: 1vw;
}

:deep .el-icon svg {
  width: 2vw;
  height: 2.5vh;
}

:deep .el-slider {
  width: 10vw;
}

:deep .el-slider__input {
  width: 4vw;
}

:deep .el-select__placeholder {
  font-size: 1.5vh;
}

:deep .el-icon {
  --color: white;
}

:deep .el-input-number__decrease {
  width: 1vw;
  background-color: #42516c;
}

:deep .el-input-number__increase {
  width: 1vw;
  background-color: #42516c;
}

:deep .el-input-number.is-controls-right .el-input-number__decrease {
  width: 1vw;
  background-color: #42516c;
  height: 1.5vh;
}

:deep .el-input-number.is-controls-right .el-input-number__increase {
  width: 1vw;
  height: 1.5vh;
  background-color: #42516c;
}

:deep .el-select__wrapper {
  background-color: #1e2430;
  width: 5vw;
  height: 3vh;
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 0.3vw; /* 宽度 */
  background-color: rgb(123, 255, 0); /* 背景色 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #282c34; /* 轨道颜色 */
  border-radius: 0; /* 轨道圆角 */
}

/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #2926c3; /* 滑块颜色 */
  border-radius: 2px; /* 滑块圆角 */
  border: 0.8vw solid #535f79; /* 滑块边框 */
}

/* 滑块在悬停或者点击时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; /* 悬停时滑块颜色 */
}
</style>
